<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p v-if="flag">{{count}}</p>
        <button @click="flag=!flag">修改状态</button>

        <hr />
        <p id="cot">count:{{count}}</p>
        <button @click="count++">count++</button>
    </div>
</body>

</html>
<script>
    // console.log(Vue);
    const app = Vue.createApp({
        data() {
            return {
                count: 100,
                flag: false
            }
        },
        methods: {

        },
        watch: {
            async flag(newvalue, oldvalue) {
                console.log(newvalue);
                // 注意: 当flag 响应数据被修改的时候, 此时页面页面开始准备要重新创建dom, 创建dom需要时间
                // 所以此时获取dom 为null,dom还没有挂载到父节点上.所以显示null
                //console.log(document.querySelector('p')); //null

                // 解决方法1: 使用延时定时器将获取dom 操作 放到异步队列中,这样执行栈内容执行完毕,
                // 完后再执行这个异步的宏任务
                // setTimeout(() => {
                //     console.log(document.querySelector('p')); //
                // }, 0)

                // 解决方法2:
                // Vue这个大对象中提供了一个方法 nextTick 方法,该方法有一个回调函数,当响应数据更新后,
                // 对应使用该响应数据的dom 已经重新渲染或挂载到dom 节点上的时候,触发该回调函数.
                // const { nextTick } = Vue;
                // nextTick(() => {
                //     console.log(document.querySelector('p'));
                // })

                // 解决方法2-另一种法写法
                // await nextTick();
                // console.log(document.querySelector('p'));

                //  

            },
            // 解决方法3: 
            // 当被监听的响应式的数据修改后,如果设置了 flush: "post",handler 不会立即触发, 
            // 当dom 更新完毕后触发.
            // flag: {
            //     handler() {
            //         console.log(document.querySelector('p'));
            //     },
            //     flush: "post"
            // },
            count: {
                handler(val) {
                    console.log(this.count);
                    console.log(document.querySelector('#cot').innerHTML);
                },
                flush: "post"
            }
        }
    }).mount('#app')

</script>